<template>
   <view>
      <uv-drop-down
         ref="dropDown"
         sign="dropDown_1"
         :text-style="{ activeColor: 'red' }"
         :extra-icon="{ name: 'arrow-down-fill', color: '#666', size: '26rpx' }"
         :extra-active-icon="{ name: 'arrow-up-fill', color: '#2878ff', size: '26rpx' }"
         :defaultValue="defaultValue"
         :custom-style="{ padding: '0 30rpx' }"
         @click="selectMenu"
      >
         <uv-drop-down-item
            name="order"
            type="2"
            :label="dropItem('order').label"
            :value="dropItem('order').value"
         >
         </uv-drop-down-item>
         <uv-drop-down-item
            name="type"
            type="2"
            :label="dropItem('type').label"
            :value="dropItem('type').value"
         >
         </uv-drop-down-item>
         <uv-drop-down-item
            name="vip_type"
            type="1"
            label="VIP文档"
            :value="dropItem('vip_type').value"
         >
         </uv-drop-down-item>
      </uv-drop-down>
      <uv-drop-down-popup
         sign="dropDown_1"
         :click-overlay-on-close="true"
         :currentDropItem="currentDropItem"
         @clickItem="clickItem"
         @popupChange="change"
      ></uv-drop-down-popup>
   </view>
</template>

<script lang="ts" setup>
import { onPageScroll } from '@dcloudio/uni-app';
import { computed, ref } from 'vue';

const dropDown = ref();

// 表示value等于这些值，就属于默认值
const defaultValue = ref([0, 'all', '0']);
// 筛选结果
const result = ref([{ name: 'order', label: '最新发布', value: 'new' }]);
const activeName = ref('order');

const order = ref({
   label: '综合排序',
   value: 'all',
   activeIndex: 0,
   color: '#333',
   activeColor: '#2878ff',
   child: [
      {
         label: '综合排序',
         value: 'all',
      },
      {
         label: '最新发布',
         value: 'new',
      },
      {
         label: '低价优先',
         value: 'money',
      },
   ],
});

const type = ref({
   label: '文档格式',
   value: 'all',
   activeIndex: 0,
   color: '#333',
   activeColor: '#2878ff',
   child: [
      {
         label: '全部',
         value: 'all',
      },
      {
         label: 'PDF',
         value: 'pdf',
      },
      {
         label: 'WROD',
         value: 'word',
      },
      {
         label: 'PPT',
         value: 'ppt',
      },
   ],
});

const vip_type = ref({
   label: 'VIP文档',
   value: 0,
   activeIndex: 0,
});

// 获取所有筛选项的映射
const dataMap = computed(() => ({
   order: order.value,
   type: type.value,
   vip_type: vip_type.value,
}));

const dropItem = computed(() => {
   return (name: string) => {
      const result_item: { label: string; value: any } = { label: '', value: '' };
      const find = result.value.find(item => item.name === name);
      if (find) {
         result_item.label = find.label;
         result_item.value = find.value;
      } else {
         result_item.label = dataMap.value[name].label;
         result_item.value = dataMap.value[name].value;
      }
      return result_item;
   };
});

// 获取当前下拉筛选项
const currentDropItem = computed(() => {
   return dataMap.value[activeName.value];
});

const change = (e: any) => {
   console.log('弹窗打开状态：', e);
};

/**
 * 点击每个筛选项回调
 * @param {Object} e { name, active, type } = e
 */
const selectMenu = (e: any) => {
   const { name, active, type } = e;
   activeName.value = name;

   // type 等于1 的需要特殊处理：type不等于1可以忽略
   if (type == 1) {
      clickItem({
         name: 'vip_type',
         label: 'VIP文档',
         value: e.active ? 1 : 0,
      });
   } else {
      const find = result.value.find(item => item.name == activeName.value);
      if (find) {
         const findIndex = dataMap.value[activeName.value].child.findIndex(
            item => item.label == find.label && item.value == find.value
         );
         dataMap.value[activeName.value].activeIndex = findIndex;
      } else {
         dataMap.value[activeName.value].activeIndex = 0;
      }
   }
};

/**
 * 点击菜单回调处理
 * @param {Object} item 选中项 { label,value } = e
 */
const clickItem = (e: any) => {
   // 下面有重新赋值，所以用let
   let { label, value } = e;
   const findIndex = result.value.findIndex(item => item.name == activeName.value);

   if (defaultValue.value.indexOf(value) > -1 && dataMap.value[activeName.value].label) {
      label = dataMap.value[activeName.value].label;
   }

   // 已经存在筛选项
   if (findIndex > -1) {
      result.value[findIndex] = {
         name: activeName.value,
         label,
         value,
      };
   } else {
      result.value.push({
         name: activeName.value,
         label,
         value,
      });
   }

   result.value = result.value.filter(item => defaultValue.value.indexOf(item.value) == -1);

   uni.showModal({
      content: `筛选的值：${JSON.stringify(result.value)}`,
   });
};

onPageScroll(() => {
   dropDown.value.init();
});
</script>

<style lang="scss" scoped></style>
